<template>
	<view class="flex flex-y-center">
		<view class="tiem-item">
			{{time_str[0]}}时
		</view>
		<view class="tiem-item">
			{{time_str[1]}}分
		</view>
		<view class="tiem-item">
			{{time_str[2]}}秒
		</view>
	</view>
</template>

<script>
	export default {
		name: "countdown",
		data() {
			return {
				time_num: 0,
				time_str: ['00', '00', '00']
			};
		},
		props: {
			time: 0,
		},
		watch: {
			time(value) {
				clearTimeout(this.timer_count);
				if (Number(value) >= 0) {
					this.time_num = Number(value);
					this.set_time();
				}
			}
		},
		created() {
			this.time_num = this.time;
			if (this.time_num > 0) {
				this.set_time();
			}
		},
		methods: {
			set_time(time) {
				let countdown = () => {
					this.get_hms();
					this.timer_count = setTimeout(() => {
						this.time_num--;
						if (this.time_num >= 0) {
							countdown();
						} else {
							this.$emit('init');
							console.log('初始化');
						}
					}, 1000)

				}
				countdown();
			},
			get_hms() {

				let time = this.time_num;

				let h = parseInt(time / 3600);
				if (String(h).length == 1)
					h = '0' + String(h);
				time = time % 3600;
				let m = parseInt(time / 60);
				if (String(m).length == 1)
					m = '0' + String(m);
				time = time % 60;
				let s = time;
				if (String(s).length == 1)
					s = '0' + String(s);
				this.time_str = [String(h), String(m), String(s)];

			},
		}
	}
</script>

<style scoped>
	.tiem-item {
		width: 64rpx;
		height: 32rpx;
		border-radius: 8rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1rpx solid rgba(1, 41, 80, 0.25);
		color: #A20F0F;
		white-space: nowrap;
		font-size: 24rpx;
		line-height: 24rpx;
		margin-left: 8rpx;
	}
</style>
